<template>
  <div class="home">
    <!-- 头部组件 -->
    <Header></Header>
    <div class="home-content">
      <!-- 轮播图 -->
      <van-swipe class="content-swiper" :autoplay="3000" lazy-render>
        <van-swipe-item v-for="img in swiperList" :key="img.id">
          <img :src="img.picUrl" style="width: 100%;" />
        </van-swipe-item>
      </van-swipe>
      <!-- 标语 -->
      <div class="content-slogan">
        <div class="slogan-item" v-for="slogan in policyDescList" :key="slogan.icon">
          <img :src="slogan.icon" />
          <span class="item-text">{{ slogan.desc }}</span>
        </div>
      </div>
      <!-- 内容项导航 -->
      <div class="content-nav">
        <div class="nav-item" v-for="(item, index) in kingKongList" :key="index">
          <a :href="item.schemeUrl">
            <img :src="item.picUrl" alt="">
            <div class="item-text">{{ item.text }}</div>
          </a>
        </div>
      </div>
      <!-- 7周年商品 -->
      <div class="content-seven">
        <div class="seven-top">
          <div class="top-img"></div>
          <van-swipe class="content-swiper"  :autoplay="3000" lazy-render>
            <van-swipe-item v-for="img in floorList.itemList" :key="img.id">
              <a :href="img.schemeUrl">
                <img :src="img.picUrl" style="width: 100%;" />
              </a>
            </van-swipe-item>
          </van-swipe>
        </div>
        <div class="seven-list">
          <div class="list-item" v-for="img in floorList.cell" :key="img.id">
            <a :href="img.schemeUrl">
              <img :src="img.picUrl" alt="">
            </a>
          </div>
        </div>
      </div>
      <!-- 新人专享礼 -->
      <div class="content-newgift">
        <div class="newgift-title">
          <span class="title-text">新人专享礼</span>
        </div>
        <div class="newgift-main">
          <div class="main-left">
            <div class="left-name">新人专享礼包</div>
            <div class="left-imgwrap">
              <img src="https://yanxuan.nosdn.127.net/static-union/1648017994dd2933.png" alt="">
            </div>
            <div class="left-animate"></div>
          </div>
          <div class="main-right">
            <div class="right-top">
              <NewGift :indexActivityModule="indexActivityModule[0]" :flag="true"></NewGift>
            </div>
            <div class="right-bottom">
              <NewGift :indexActivityModule="indexActivityModule[1]"></NewGift>
            </div>
          </div>
        </div>
      </div>
      <!-- 热销榜 -->
      <div class="footer">
        <div class="item_t">
          <div class="title">{{ homeList.title }}</div>
          <div class="big">
            <div class="bigchoose" v-for="item in categoryList.slice(0, 2)" :key="item.categoryId">
              <div class="left">{{ item.categoryName }}</div>
              <div class="right">
                <img :src="item.picUrl" />
              </div>
            </div>
          </div>
        </div>
        <div class="list">
          <div class="item" v-for="item in categoryList.slice(2, 10)">
            <a :href="item.targetUrl">
              <div class="title">{{ item.categoryName }}</div>
              <img :src="item.picUrl" alt="" />
            </a>
          </div>
        </div>
      </div>
      <!-- 为你精选 -->
      <div class="content-select">
        <div class="title">为你精选</div>
        <GoodsList></GoodsList>
      </div>
    </div>
    <div class="toTop" v-if="top" @click="tops"></div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue"
export default defineComponent({
  name: 'Home',
})
</script>

<script lang="ts" setup>
import GoodsList from '@/components/GoodsList/index.vue'
import NewGift from './NewGift/index.vue'
import Header from '@/components/Header/index.vue'
import { computed, onMounted, ref } from 'vue'
import { storeToRefs } from 'pinia'
import { useHomeStore } from '@/stores/home'
import { useRoute } from 'vue-router'
import { useRouter } from 'vue-router'
const router = useRouter()
const route = useRoute()
const homeStore = useHomeStore()
const top = ref<boolean>(false)
const { kingKongList, swiperList, policyDescList, categoryList, floorList, indexActivityModule, homeList, goodsList } = storeToRefs(homeStore)
onMounted(() => {
  homeStore.getKingkongList()

  window.addEventListener('scroll',function(){
    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop
    if(scrollTop>=180){
      top.value = true
    }else{
      top.value = false
    }
  })
})
function tops(){
  var timer = setInterval(()=>{
    document.documentElement.scrollTop<=0 ? clearInterval(timer) : window.scrollTo(0,document.documentElement.scrollTop - 10), 20
  })
}




</script>

<style scoped>
/* 头部样式 */
.home {
  width: 375px;
}

.home-content {
  position:relative;
  top: 74px;
  left: 0;
}
/* 轮播图 */
.content-swiper {
  height: 148px;
  overflow: hidden;
}

/* .custom-indicator{
  width: 8px;
  height:8px;
  background: #000;
  opacity: 0.2;
}
.custom-indicator-active{
  opacity: 1;
  background: #fff;
} */
/* 标语样式 */
.content-slogan {
  width: 100%;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.slogan-item {
  display: flex;
  align-items: center;
}

.slogan-item img {
  width: 16px;
  height: 16px;
}

/* 内容导航样式 */
.content-nav {
  display: flex;
  flex-wrap: wrap;
}

.content-nav .nav-item {
  width: 55px;
  height: 78px;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 5px 10px;
}

.nav-item img {
  width: 100%;
  height: 55px;
}

.content-nav .nav-item .item-text {
  height: 18px;
  line-height: 18px;
  margin-top: 5px;
  text-align: center;
  color: #333;
}

/* 7周年样式 */
.content-seven .seven-top {
  height: 100px;
  position: relative;
}

.content-seven .seven-top .top-img {
  height: 100%;
  background-image: url("https://yanxuan.nosdn.127.net/static-union/168059808822a8e6.gif?imageView&quality=75");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: 50%;

}

.content-seven .seven-top .content-swiper {
  width: 85px;
  height: 85px;
  position: absolute;
  top: 14%;
  left: 10%;
}

.content-seven .seven-list {
  height: 110px;
  display: flex;
  margin: 10px;
  justify-content: space-between;

}

.content-seven .seven-list .list-item {
  width: 115.5px;
  height: 100%;
  background-image: url("https://yanxuan.nosdn.127.net/static-union/168059878811730c.png?quality=75&type=webp&imageView&thumbnail=250x0");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: 50%;
  position: relative;
}

.content-seven .seven-list .list-item img {
  width: 70px;
  height: 70px;
  position: absolute;
  left: 50%;
  bottom: 1%;
  margin-left: -35px;
}

/* 新人专享礼 */
.content-newgift {
  margin: 10px 0;
  padding: 0 0 15px;
}

.content-newgift .newgift-title {
  height: 45px;
  width: 100%;
  padding: 0 15px;
  line-height: 45px;
  text-align: center;
  font-family: PingFangSC-Regular;
  font-size: 16px;
}

.content-newgift .newgift-title .title-text {
  position: relative;
}

.content-newgift .newgift-title .title-text::before {
  content: '';
  width: 12px;
  height: 1.5px;
  background: #333;
  position: absolute;
  top: 10px;
  left: -20px;
}

.content-newgift .newgift-title .title-text::after {
  content: '';
  width: 12px;
  height: 1.5px;
  background: #333;
  position: absolute;
  top: 10px;
  right: -20px;
}

.newgift-main {
  padding-left: 15px;
  box-sizing: border-box;
  display: flex;
}

.newgift-main .main-left {
  width: 171.5px;
  height: 217px;
  color: #333;
  background: #f9e9cf;
  position: relative;
  border-radius: 2px;
  margin-right: 2px;
  /* float: left; */
  /* box-sizing: border-box; */
}

.newgift-main .main-left .left-name {
  font-family: PingFangSC-Medium;
  font-size: 16px;
  padding: 15px 0px 0px 15px;
}

.newgift-main .main-left .left-imgwrap img {
  width: 129px;
  height: 138.5px;
}

.newgift-main .main-left .left-imgwrap {
  margin: 18px 21px;

}

.newgift-main .main-left .left-animate {
  width: 15px;
  height: 10px;
  background-image: url("https://yanxuan.nosdn.127.net/3f7e731c6650bc1770589c78bd5a18b7.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  position: absolute;
  right: 53px;
  bottom: 35px;
}

.newgift-main .main-right {
  /* margin-right: 2px; */
  float: left;
  /* box-sizing: border-box; */
}

.main-right .right-top {
  width: 171.5px;
  height: 107.5px;
  background: #fbe2d3;
  box-sizing: border-box;
  border-radius: 4px;
  margin-bottom: 2px;
  /* position: relative; */
}


.main-right .right-bottom {
  width: 171.5px;
  height: 107.5px;
  background: #ffecc2;
  box-sizing: border-box;
  border-radius: 4px;
  /* margin-bottom: 2px; */
  /* position: relative; */
}

/* 热销榜 */
.footer {
  margin-top: 20px;
  padding: 0 10px 0 15px;
  margin-bottom: 10px;
}

.footer .item_t {
  font-size: 14px;
}

.footer .item_t .title {
  font-size: 16px;
}

.footer .item_t .big {
  display: flex;
  /* padding:0 10px 10px 15px; */
}

.footer .item_t .big .bigchoose {
  margin: 20px 0;
  width: 170px;
  height: 100px;
  background-color: #f9f3e4;
  margin-bottom: 5px;
  margin-right: 5px;
  display: flex;
  align-items: center;
}

.footer .item_t .big .bigchoose .left {
  position: relative;
  padding-left: 12px;
  width: 70px;
  height: 21px;
  z-index: 1;
  flex-shrink: 0;
}

.footer .item_t .big .bigchoose .left::before {
  position: absolute;
  top: 26px;
  content: '';
  left: 12px;
  width: 24px;
  height: 2px;
  display: block;
  background-color: #333;
}

.footer .item_t .big .bigchoose .right {
  position: relative;
}

.footer .item_t .big .bigchoose .right img {
  width: 90px;
  height: 100px;
}

.footer .list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding-bottom: 15px;
}

.footer .list .item {
  width: 82.5px;
  height: 90px;
  margin: 0 5px 5px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #f5f5f5;
}

.footer .list .item .title {
  font-size: 12px;
  color: #333;
  margin-top: 5px;
  text-align: center;
  font-family: PingFangSC-Medium;
}

.footer .list .item img {
  width: 60px;
  height: 60px;
}

/* 为你精选 */
.content-select {
  width: 100%;
}

.content-select .title {
  height: 27px;
  font-size: 18px;
  font-weight: 700;
  font-family: PingFang SC Source Han Sans CN;
  margin: 10px 0 10px 10px;

}

/* 回到顶部样式 */
.home .toTop{
  width: 41px;
  height:41px;
  background-image: url('https://yanxuan-static.nosdn.127.net/hxm/yanxuan-mall-wap/assets/img/go-1d03abe0594ead4dabcf6bb70fc54966.png');
  background-size:41px 41px;
  position: fixed;
  right:12px;
  bottom:60px;
}
</style>